<template>
	<view class="content">
		<view class="header">
			<image :src="logo"></image>
		</view>
		<sub-tab :tabs="tabs" @change="changeIndex" :selectIndex="selectIndex"></sub-tab>
		<view class="list">
			<view class="list-call" v-if="selectIndex==0">
				<!-- <image class="img" src="/static/shilu-login/1.png"></image> -->
				<input class="sl-input" v-model="mobile" type="number" maxlength="11"
					:placeholder="this.$t('form.mobile')" />
			</view>
			<view class="list-call" v-else>
				<!-- <image class="img" src="/static/shilu-login/1.png"></image> -->
				<input class="sl-input" v-model="email" type="email" :placeholder="this.$t('form.email')" />
			</view>
			<view class="list-call">
				<!-- <image class="img" src="/static/shilu-login/2.png"></image> -->
				<input class="sl-input" v-model="password" type="text" maxlength="32"
					:placeholder="this.$t('form.password')" password="true" />
			</view>
		</view>
		<view class="button-login" hover-class="button-hover" @tap="bindLogin()">
			<text style="font-size: 40upx;">{{$t('Sign in')}}</text>
		</view>
		<view class="button-login" v-if="getDeviceId" hover-class="button-hover" @tap="bindTouristLogin()">
			<text style="font-size: 40upx;">{{$t('Tourist')}}</text>
		</view>
		<view class="logintext mt20 flex">
			<navigator class="ml25" url="reg" open-type="navigate">{{$t('Sign up')}}</navigator>
			<navigator class="ml25" url="forget" open-type="navigate">{{$t('Reset password')}}</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [this.$t('Phone number'), this.$t('Email')],
				selectIndex: 0,
				email: '',
				mobile: '',
				password: '',
				openid: '',
				unionid: '',
				session_key: '',
				logo: ''
			};
		},
		onLoad(e) {
			this.logo = uni.getStorageSync("config")?.site?.logo;

			if (e.fxpid) {
				uni.setStorage({
					key: 'fxpid',
					data: e.fxpid
				})
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('Sign in')
			});
		},
		computed:{
			getDeviceId () {
				// 获取设备品牌、型号、设备 id 、系统名称、osVersion
				let _deviceId = null
				const {deviceBrand, deviceModel, deviceId, osName, osVersion} = uni.getSystemInfoSync()
				// #ifdef APP-PLUS
				_deviceId = deviceId
				// #endif
				return _deviceId
			}
		},
		methods: {
			changeIndex(index) {
				this.selectIndex = index;
			},
			reportRegister () {
				// #ifdef APP-PLUS
				const openinstall = uni.requireNativePlugin('openinstall-plugin');
				openinstall.init();
				openinstall.reportRegister();
				// #endif
		
			},
			async bindTouristLogin () {
				try {
					let [err, res] = await this.$httpas.get('/api/user/tourist', {
						device:'9911'
					});
					if (!this.$httpas.errorCheck(err, res)) return;
					if (res.data.code === 1) {
						uni.setStorage({ //缓存配置信息
							key: 'userinfo',
							data: res.data.data.userinfo
						})
						uni.showModal({
							title: this.$t('Warning'),
							content: res.data.msg,
							showCancel: false,
							confirmText: this.$t('OK'),
							success: function(res) {
								if (res.confirm) {
									uni.switchTab({
										url: '/pages/client/member/index'
									})
								}
								this.reportRegister()
							}
						});
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: "none"
						});
					}
				} catch (e) {
					
				}
			},
			async bindLogin() {
				let _this = this;
				let account = this.selectIndex == 0 ? this.mobile : this.email
				if (!account) {
					uni.showToast({
						title: this.$t('form.mobile'),
						icon: "none"
					});
					this.userfocus = true
					return false;
				}
				if (!this.password) {
					uni.showToast({
						title: this.$t('form.password'),
						icon: "none"
					});
					this.paswfocus = true
					return false;
				}
				let data = {
					'account': account,
					'password': this.password
				};
				let [err, res] = await this.$httpas.get('/api/user/login', data);
				if (!this.$httpas.errorCheck(err, res)) return;
				if (res.data.code === 1) {
					uni.setStorage({ //缓存配置信息
						key: 'userinfo',
						data: res.data.data.userinfo
					})
					uni.showModal({
						title: this.$t('Warning'),
						content: res.data.msg,
						showCancel: false,
						confirmText: this.$t('OK'),
						success: function(res) {
							if (res.confirm) {
								uni.switchTab({
									url: '/pages/client/member/index'
								})
							}
							this.reportRegister()
						}
					});
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					});
				}

			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.header {
		width: 161rpx;
		height: 161rpx;
		background: #D9D9D9;
		/* box-shadow: 0rpx 12rpx 13rpx 0rpx rgba(63, 205, 235, 0.47); */
		border-radius: 50%;
		margin-top: 30rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.header image {
		width: 161rpx;
		height: 161rpx;
		border-radius: 50%;
	}

	.list {
		display: flex;
		flex-direction: column;
		padding-top: 50rpx;
		padding-left: 70rpx;
		padding-right: 70rpx;
	}

	.list-call {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		color: #333333;
		border-bottom: 0.5px solid #e2e2e2;
	}

	.list-call .img {
		width: 40rpx;
		height: 40rpx;
	}

	.list-call .sl-input {
		flex: 1;
		text-align: left;
		font-size: 32rpx;
		margin-left: 16rpx;
	}

	.button-login {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		background: linear-gradient(270deg, #FF6C89 0%, #FFB163 98%);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}

	.button-hover {
		/* background: linear-gradient(-90deg, rgba(63, 205, 235, 0.8), rgba(188, 226, 158, 0.8)); */
		background: linear-gradient(270deg, #FF6C89 0%, #FFB163 98%);
	}

	.logintext {
		width: 60%;
		margin: 20px auto;
		color: #666666;
	}
</style>